
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Google Book Search Embedded Viewer API Example</title> 
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
	<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript"> 
      var viewer = null;
      google.load("books", "0");

      /* Called when the Google API is loaded. Here we instantiate the
       * viewer for the desired book.
       */
      function initialize() {
        var viewerCanvas = document.getElementById('viewerCanvas');
		var $ISBN = $('#txt_searchBookByISBN').val();
		if('' === $ISBN) $ISBN = '0738531367';
        viewer = new google.books.DefaultViewer(viewerCanvas);
        viewer.load('ISBN:' + $ISBN, viewerLoadFail, viewerLoadSuccess);
      }

      //@如果無法找到書本，就呼叫這個函式。
      function viewerLoadFail() {
		alert('FAIL');
        $('#viewerCanvas').hide();
      }
 
      //@如果成功找到書本，就呼叫這個函式。
      function viewerLoadSuccess() {
	  	$('#viewerCanvas').show();
		alert('SUCCESS');
      }
 
      /* Load the book as soon as the Google AJAX API is ready
       */
      google.setOnLoadCallback(initialize);

	$(document).ready(function()
	{
		$('#btn_search').click(function()
		{
			initialize();
		});
	});

    </script> 
  </head> 
  <body> 
    <label>請輸入ISBN: </label>
	<input type="text" id="txt_searchBookByISBN" />
	<input type="button" id="btn_search" value="Search"/>
  	<div id="viewerCanvas" style="width: 500px; height: 450px"></div> 
  </body> 
</html> 